/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-03-31 14:58:28
 * @LastEditors: cuidm
 * @LastEditTime: 2022-11-11 16:46:57
 */
import React from "react";
import { Link } from "react-router-dom"
import styles from "./HcpHeader.module.less";
import { Breadcrumb, Button, Space, Tooltip } from "antd";
import {
    LeftOutlined,
    EditOutlined,
    DeleteOutlined,
} from "@ant-design/icons";
const CmdbHeader = ({
    title,
    titleList,
    subTitle,
    showBackButton,
    history,
    showRefreshButton,
    showEdit,
    showDelete,
    showToolip,
    OnRefreshButtonClick,
    OnEditClick,
    OnDeleteClick,
    goBackUrl,
    goBackUrlDefault,
    goBackUrlSearch,
    goBackUrlState
}) => {
    return (
        <header className={styles.header}>
        <div className={styles.header__title}>
            <span className={styles.header__flag + " hcp-breadcrumb-icon"}></span>
            {
                titleList ?
                    <Tooltip placement="right" title={showToolip || ""}>
                        <Breadcrumb>
                        {
                            titleList.map((item, index) => {
                                if(typeof item =="object") {
                                    return (
                                        <Breadcrumb.Item
                                            key={index} 
                                        >
                                            <a
                                                onClick={(_) => { 
                                                    if (history) {
                                                        let obj = { pathname: item.pathname};
                                                        if(item.search) obj.search = item.search;
                                                        if(item.state) obj.state = item.state;
                                                        history.push(obj); 
                                                    }
                                                }}
                                            >
                                                {item.name}
                                            </a>
                                        </Breadcrumb.Item>
                                    )
                                }
                                return (
                                    <Breadcrumb.Item key={index}>
                                        {item}
                                    </Breadcrumb.Item>
                                )
                            })
                        }
                        </Breadcrumb>
                    </Tooltip>
                : title
            }
            {
                subTitle && <span style={{color: '#999', fontSize: 12, marginLeft: 10}}>{subTitle}</span>
            }
            { 
                showEdit || showDelete ?
                    <Space style={{color: "#188DFA", paddingLeft: "10px"}}>
                        {showEdit ? (
                            <span 
                                className="iconfont icon-edit" 
                                onClick={(e) => {
                                    if (OnEditClick) OnEditClick(e);
                                }}
                            />
                        ) : ""}
                        {showDelete ? (
                            <span 
                                className="iconfont icon-delete" 
                                onClick={(e) => {
                                    if (OnDeleteClick) OnDeleteClick(e);
                                }}
                            />
                        ) : ""}
                    </Space>
                : ""
            }
        </div>
        <div className={styles.header__buttons}>
            {showRefreshButton ? (
            <Button
                type="primary"
                onClick={(e) => {
                    if (OnRefreshButtonClick) OnRefreshButtonClick(e);
                }}
            >
                刷新
            </Button>
            ) : ""}
            {showBackButton ? (
            <>
                {
                goBackUrl ? 
                <Button 
                    icon={<LeftOutlined />} 
                    style={{ marginRight: 20 }}
                    onClick={(_) => { 
                        if (history) {
                            let obj = { pathname: goBackUrl };
                            if(goBackUrlSearch) obj.search = goBackUrlSearch;
                            if(goBackUrlState) obj.state = goBackUrlState;
                            history.push(obj); 
                        }
                    }}
                >
                     | 返回
                </Button> 
                : <Button 
                    icon={<LeftOutlined />} 
                    style={{ marginRight: 20 }}
                    onClick={(_) => { 
                        if (history) {
                            if (history.location?.key) {
                                history.goBack();
                            } else if (goBackUrlDefault) {
                                history.push({ pathname: goBackUrlDefault })
                            }
                        } 
                    }}
                    > 
                    | 返回
                    </Button>
                }
            </>
            ) : ""}
        </div>
        </header>
    );
};

export default React.memo(CmdbHeader);
